<template>
  <div class="detail">
    <!-- 头部 -->
    <div class="detail-header">
      <detailHeader />
    </div>

    <!-- 商品内容区 -->
    <div class="detail-content" >
      <detailContent :list="list" />
    </div>

    <!-- 底部 -->
    <div class="detail-footer">
      <detailFooter :list="list" :id="goodsId"/>
    </div>
  </div>
</template>

<script lang="ts" setup>
import detailFooter from '@/views/detail/components/detail-footer.vue'
import detailHeader from '@/views/detail/components/detail-header.vue'
import detailContent from '@/views/detail/components/detail-content.vue'
import { useRoute } from 'vue-router'
import { useGoodsStore } from '@/stores/goods'
const router = useRoute()
//仓库实例
const goodsStore = useGoodsStore()
goodsStore.getGoodsList()

//商品id
const goodsId = router.fullPath.split('=')[1]

const list = ref<goodsList | null>(null)

watchEffect(() => {
  // 更具传入商品id找出对应数据
  // @ts-ignore
  list.value = goodsStore.goodslist?.filter((item) => item.id === goodsId)
})

defineOptions({
  name: 'detail'
})
</script>

<style scoped>
.detail {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.detail-header {
  width: 100%;
  height: 44px;
  /* background-color: pink; */
}
.detail-content {
  flex: 1;
}
.detail-footer {
  width: 100%;
  height: 50px;
}
</style>
